<template>
  <div v-for="(item_, index) in item.comps" :key="index" class="margin-top-8">
    <component
      v-if="item_.name == 'DropdownNormal'"
      :is="item_.name"
      :label="item_.lable"
      v-model="item_.attrs.value"
      :valLists="getLists(index)"
      @change="onUpdateEvent"
    ></component>
    <component
      v-else
      :is="item_.name"
      :label="item_.lable"
      :placeholder="getToast(item.type, index)"
      v-model="item_.attrs.value"
      @change="onUpdateEvent"
    ></component>
  </div>
</template>

<script setup lang="ts">
import { pushPages, pushPops } from '@/views/ts/'
import { EVENT_HOVER_TYPES, FRONT_EVENT_TYPES, STATISTIC_DATA_TYPES, SAVE_IMG_DATA_TYPES } from '@/const/'
import { OPEN_PUSH_TYPES, TOAST } from '@/const/web/'
import { useWebComponentStore } from '@/store/web/component'

const props = defineProps<{ 
  item: IEvent,
  index: number,
}>();
const item = props.item

const useWebComponent = useWebComponentStore()

const getToast = (eventType: string, index: number) => {
  let str = TOAST[eventType] && TOAST[eventType][index]
  return str ? JSON.stringify(str) : '预留属性，可以不用填写'
}
const getLists = (index: number) => {
  let list: any[] = []
  let type = item.type
  if (type == EVENT_HOVER_TYPES.showOrHide) {
    list.push(
      { name: "显示", value: 1 },
      { name: "隐藏", value: 0 }
    );
  } else if (type == EVENT_HOVER_TYPES.layer) {
    pushPops(list)
  } else if (type == EVENT_HOVER_TYPES.anchor) {
    pushPages(list)
  } else if (type == EVENT_HOVER_TYPES.number) {
    pushPops(list)
  } else if(type == EVENT_HOVER_TYPES.rotate3d ){
    if(index == 0) {
      pushPops(list)
    }else if(index == 1) {
      pushPages(list)
    }
  } else if(type == EVENT_HOVER_TYPES.shake){
    if(index == 1) {
      pushPops(list)
    } else if(index == 2) {
      pushPages(list)
    }
  } else if(type == EVENT_HOVER_TYPES.openPush){
    list = OPEN_PUSH_TYPES
  } else if(type == EVENT_HOVER_TYPES.checkWeibo) {
    if(index == 0) {
      pushPops(list)
    } else if(index == 2) {
      pushPages(list)
    }
  } else if(type == EVENT_HOVER_TYPES.frontEvents) {
    list = FRONT_EVENT_TYPES
  } else if(type == EVENT_HOVER_TYPES.statisticData){
    list = STATISTIC_DATA_TYPES
  } else if(type == EVENT_HOVER_TYPES.saveImg) {
    list = SAVE_IMG_DATA_TYPES
  }
  return list
}
const onUpdateEvent = () => {
  useWebComponent.updateEvent({ type: item.type, event: item })
}
</script>
